var arrayDate = ["2021-01","2021-02","2021-07","2021-12"];
var arraySumCost = [4800,4800,32962737,110100];
var arrayReceivedCost =[100,100,37,110100];
var arrayUnpaidCost =[4700,4700,32962700,0];



var myChart = echarts.init(document.getElementById('Circular'));

myChart.setOption({
    color: ['#80FFA5', '#00DDFF', '#37A2FF'],
    title: {
        text: '渐变堆叠面积图'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#6a7985'
            }
        }
    },
    legend: {
        data: ['应收总金额', '已收总金额', '未结总金额']
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            boundaryGap: false,
            data: []
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: [
        {
            name: '应收总金额',
            type: 'line',
            stack: '应收总金额',
            smooth: true,
            lineStyle: {
                width: 0
            },
            showSymbol: false,
            areaStyle: {
                opacity: 0.8,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(128, 255, 165)'
                }, {
                    offset: 1,
                    color: 'rgba(1, 191, 236)'
                }])
            },
            emphasis: {
                focus: 'series'
            },
            data: []
        },
        {
            name: '已收总金额',
            type: 'line',
            stack: '已收总金额',
            smooth: true,
            lineStyle: {
                width: 0
            },
            showSymbol: false,
            areaStyle: {
                opacity: 0.8,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(0, 221, 255)'
                }, {
                    offset: 1,
                    color: 'rgba(77, 119, 255)'
                }])
            },
            emphasis: {
                focus: 'series'
            },
            data: []
        },
        {
            name: '未结总金额',
            type: 'line',
            stack: '未结总金额',
            smooth: true,
            lineStyle: {
                width: 0
            },
            showSymbol: false,
            areaStyle: {
                opacity: 0.8,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(55, 162, 255)'
                }, {
                    offset: 1,
                    color: 'rgba(116, 21, 219)'
                }])
            },
            emphasis: {
                focus: 'series'
            },
            data: []
        }

    ]
});


//显示数据视图运单视图
$.post("../../FinanceWay",
    function(data){
        $.each(data, function(i, n){
            arrayDate. push(n.date);
            arraySumCost. push(n.sumCost);
            arrayReceivedCost. push(n.receivedCost);
            arrayUnpaidCost. push(n.unpaidCost);
        });
    }, "json").done(function (data) {
    // 显示标题，图例和空的坐标轴
    myChart.setOption({
        xAxis: {
            data: arrayDate
        },
        series: [{
            // 根据名字对应到相应的系列
            name: '应收总金额',
            data: arraySumCost
        },{
            // 根据名字对应到相应的系列
            name: '已收总金额',
            data: arrayReceivedCost
        },{
            // 根据名字对应到相应的系列
            name: '未结总金额',
            data: arrayUnpaidCost
        }]
    });
});













